<template>
  <div>
    <div class="goodList">
      <div
        v-for="item in goodList"
        :key="item.id"
        class="goodItem"
        @click="xqFn(item)"
      >
        <img :src="item.img" />
        <div class="title">
          <span class="zy" v-if="item.isDirect">直营</span>
          <span class="qh" v-if="!item.isHave">缺货</span>
          {{ item.name }}
        </div>
        <div class="priceNum">
          <span class="price">￥{{ item.price }}</span>
          <span class="num">销量:&nbsp;{{ item.volume }}</span>
        </div>
      </div>

      <!-- <div class="goodItem" @click="xqFn">
        <img src="http://imooc.res.lgdsunday.club/goods-1.jpg" />
        <div class="title">商品122</div>
        <div class="priceNum">
          <span class="price">￥22</span>
          <span class="num">销量:&nbsp;22</span>
        </div>
      </div>
      <div class="goodItem">
        <img src="http://imooc.res.lgdsunday.club/goods-1.jpg" />
        <div class="title">商品1</div>
        <div class="priceNum">
          <span class="price">￥22</span>
          <span class="num">销量:&nbsp;22</span>
        </div>
      </div>
      <div class="goodItem">
        <img src="http://imooc.res.lgdsunday.club/goods-1.jpg" />
        <div class="title">商品1</div>
        <div class="priceNum">
          <span class="price">￥22</span>
          <span class="num">销量:&nbsp;22</span>
        </div>
      </div>
      <div class="goodItem">
        <img src="http://imooc.res.lgdsunday.club/goods-1.jpg" />
        <div class="title">商品1</div>
        <div class="priceNum">
          <span class="price">￥22</span>
          <span class="num">销量:&nbsp;22</span>
        </div>
      </div> -->
      <!-- 分割 -->
    </div>
  </div>
</template>

<script>
// import { goodsApi } from "@/api/home";

export default {
  props: {
    goodList: [Object, Array],
  },
  data() {
    return {};
  },
  //   async created() {
  //     let { data } = await goodsApi(this.token);

  //     this.goodList = data.data.list;
  //   },
  methods: {
    xqFn(item) {
      let items = item;
      if (items.isHave) {
        this.$router.push({ path: `/goodItemxq/${items.id}` });
      } else {
        alert("当商品无库存，请选择其他商品");
      }
    },
  },
};
</script>

<style scoped lang="less">
.zy {
  padding: 0 0.10667rem;
  font-size: 0.32rem;
  color: #fff;
  background-color: #d81e06;
  border-radius: 0.05333rem;
  margin-right: 0.05333rem;
}
.qh {
  padding: 0 0.10667rem;
  font-size: 0.32rem;
  color: #fff;
  background-color: #909090;
  border-radius: 0.05333rem;
  margin-right: 0.05333rem;
}
.goodList {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: start;
  padding-bottom: 100px;
  & > .goodItem:nth-child(2n) {
    vertical-align: bottom;
    padding-bottom: 30px;
    margin-top: 20px;
  }
  & > .goodItem:nth-child(2n-1) {
    vertical-align: top;
    padding-bottom: 30px;
    margin-bottom: 20px;
  }
  & > .goodItem:nth-child(2) {
    padding-top: 25px;
    padding-bottom: 30px;
    margin-top: 5px;
  }
  .goodItem {
    flex: 1;
    box-sizing: border-box;

    vertical-align: top;
    min-width: calc((100% - 100px) / 2);
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
    margin: 5px;
    padding: 10px;
    img {
      width: 100%;
    }
    .title {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      text-overflow: ellipsis;
      font-size: 32px;
      padding: 0 25px;
    }
    .priceNum {
      .price {
        color: red;
        font-size: 38px;
      }
      .num {
        margin-left: 5rem;
        font-size: 32px;
        color: #999;
      }
    }
  }
}
</style>
